<template>
  <el-dialog
    :title="dictDialogTitle"
    :visible.sync="dialogVisible"
    width="35%"
    top="13vh"
    :before-close="closeDictDialogHandle"
    :close-on-click-modal="false">
    <el-form :model="dictForm" :rules="dictRules" ref="dictForm" @keyup.enter.native="enterFromHandle" label-width="85px">
      <el-form-item label="字典类型" prop="type">
        <el-select v-model="dictForm.type" filterable clearable placeholder="请选择字典类型" class="w100">
          <el-option
            v-for="dict in dictTypeList"
            :key="'type' + dict.value"
            :label="dict.name"
            :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="值标题" prop="valueLabel">
        <el-input v-model="dictForm.valueLabel" maxlength="50" placeholder="请输入字典值标题"></el-input>
      </el-form-item>
      <el-form-item label="值类型" prop="valueType">
        <el-radio-group v-model="dictForm.valueType">
          <el-radio :label="0" border>string</el-radio>
          <el-radio :label="1" border>json</el-radio>
          <el-radio :label="2" border>json-array</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="字典值" prop="value">
        <el-input
          type="textarea"
          resize="none"
          :rows="4"
          maxlength="500"
          placeholder="请输入内容"
          v-model="dictForm.value">
        </el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="21">
          <el-form-item label="排序等级" prop="sort">
            <el-input v-model.number="dictForm.sort" maxlength="6" placeholder="请输入排序等级"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-tooltip placement="bottom" effect="light" class="warning-icon">
            <div slot="content">
              排序等级为数值
            </div>
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDictDialogHandle(false)">取 消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveDictHandle">添 加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary"  @click="updateDictHandle">修 改</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "dict-save-update",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      },
      // 系统字典类型数据列表
      dictTypeList: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        // 系统字典表单对象
        dictForm: {
          id: '',
          type: '',
          value: '',
          valueLabel: '',
          valueType: 0,
          sort: '',
        },
        // 弹出框标题
        dictDialogTitle: undefined,
        // 系统字典操作类型[false-添加 true-修改]
        optType: false,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 系统字典表单校验规则
        dictRules: {
          name: [
            { required: true, message: '字典名称不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '字典类型不能为空', trigger: 'blur' },
          ],
          value: [
            { required: true, message: '字典值不能为空', trigger: 'blur' }
          ],
          valueLabel: [
            { required: true, message: '字典值标题不能为空', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '排序等级不能为空', trigger: 'blur' },
            { type: 'number', message: '排序等级必须为数字值'}
          ],
        }
      }
    },
    methods: {
      /**
       * 初始化系统字典操作弹出框方法
       * @param {Object}  dict    系统字典对象
       * @param {boolean} optType 系统字典操作类型[false-添加 true-修改]
       */
      initDictDialog(dict, optType) {
        this.optType = optType
        this.dictDialogTitle = optType ? '修改字典' : '添加字典'

        if (optType) {
          let dictForm = this.dictForm
          dictForm.id = dict.id
          dictForm.name = dict.name
          dictForm.type = dict.type
          dictForm.value = dict.value
          dictForm.valueLabel = dict.valueLabel
          dictForm.valueType = dict.valueType
          dictForm.sort = dict.sort
        } else {
          this.getNextSort();
        }
      },
      /**
       * 获取下一个默认排序等级方法
       */
      getNextSort() {
        this.$axios.$get('/sys/dict/next/sort')
          .then(({ data}) => {
            this.dictForm.sort = data;
          })
          .catch(() => {})
      },
      // 表单回车事件
      enterFromHandle() {
        if (this.optType) {
          this.updateDictHandle()
        } else {
          this.saveDictHandle()
        }
      },
      /**
       * 保存系统字典事件
       */
      saveDictHandle() {
        this.$refs.dictForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          let dictForm = this.dictForm

          // 按钮不可被点击
          this.buttonLoad = true;
          this.$axios.$post('/sys/dict/save', dictForm)
            .then(() => {
              this.notify('success', "添加成功", `成功添加'${dictForm.name}'字典`)

              // 关闭弹出框
              this.closeDictDialogHandle(true)
            })
            .catch(() => {})
            .finally(() => {
              // 按钮恢复可点击
              this.buttonLoad = false
            })
        });
      },
      /**
       * 更新系统字典事件
       */
      updateDictHandle() {
        this.$refs.dictForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          // 按钮不可被点击
          this.buttonLoad = true;

          let dictForm = this.dictForm

          this.$axios.$post('/sys/dict/update', dictForm)
            .then(() => {
              this.notify('success', "修改成功", `成功修改'${dictForm.name}'字典`)

              // 关闭弹出框
              this.closeDictDialogHandle(true)
            })
            .catch(() => {})
            .finally(() => {
              // 按钮恢复可点击
              this.buttonLoad = false
            })
        });
      },
      // 弹出框关闭处理事件
      closeDictDialogHandle(bool) {
        // 清空系统字典表单对象信息
        this.$refs.dictForm.resetFields()
        this.dictForm.id = ''

        // 此处判断触发事件是否是弹出框自带关闭事件
        if (typeof bool === 'function') {
          bool = false
        }
        // 向上传递事件
        this.$emit('close-dict-dialog', bool)
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-radio {
    margin-right: 10px;
  }
  .warning-icon {
    line-height: 32px;
    font-size: 20px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
  .w100 {
    width: 100%;
  }
</style>
